import React, { Fragment, useState, useEffect } from 'react';
import { Link, useRequest, useHistory } from 'umi';
import type { FC } from 'react';
import { Col, Row, Input, Button, Tabs, Tag, Avatar, Typography } from 'antd';
import { SearchOutlined, GithubOutlined, CalendarOutlined } from '@ant-design/icons';
import style from './index.less';
import Calender from './Calender/calender';
import Weather from './weather/index';
import { getArticle, getArticleType } from './service';
import IconFont from '@/components/Icon';
interface Props {}

const Index: FC<Props> = () => {
  const { Search } = Input;
  const { TabPane } = Tabs;
  const { Title } = Typography;
  const history = useHistory();
  const [acticles, setArticles] = useState([]);
  // 文章类型 Tabs用的数据
  const [articleType, setArticleType] = useState([]);
  const [searchParams, setSearchParams] = useState({
    title: '',
    username: '',
    publish:1,
    check:1
  });
  useRequest(
    async () =>
      await getArticle(searchParams).then(res => {
        const { data } = res;
        setArticles(data);
      })
  );
  const goToDetail = (id: number, user_id: string) => {
    history.push(`/client/detail/${id}`, { user_id });
  };
  const menu = [
    {
      link: '/client/markdown',
      title: '创建文章',
      icon: <IconFont type="iconPensyumaobi1" style={{ fontSize: '20px' }} />,
    },
    {
      link: '/client/userdetail',
      title: '创作者信息',
      icon: <IconFont type="iconchuangzuozhezhongxin" style={{ fontSize: '20px' }} />,
    },
    // {
    //   link: '/client/markdown',
    //   title: '优秀作者推荐',
    //   icon: <IconFont type="iconzhengshu" style={{ fontSize: '20px' }} />,
    // },
    {
      link: '/client/mine',
      title: '我的',
      icon: <IconFont type="iconwode" style={{ fontSize: '20px' }} />,
    },
    {
      link: '/client/discuss',
      title: '讨论社区',
      icon: <IconFont type="iconshequ4" style={{ fontSize: '20px' }} />,
    },
    {
      link: '/client/book',
      title: '书籍分享',
      icon: <IconFont type="iconwupin-shuji" style={{ fontSize: '20px' }} />,
    },
    {
      link: '/client/Sign',
      title: '签到',
      icon: <IconFont type="iconqiandao" style={{ fontSize: '20px' }} />,
    },
  ];
  const [userInfo, setUserInfo] = useState({});
  const searchAuthorOrTitle = (search = searchParams) => {
    getArticle(search).then(res => {
      const { data } = res;
      setArticles(data);
    });
  };
  useEffect(() => {
    const username = localStorage.getItem('username');
    setUserInfo({ username });
    // 请求文章类型接口
    getArticleType({}).then(res => {
      // 这个数据作为Tabs的“全部”选项 传空参数
      let temp = [{ id: 0, type: '' }];
      // 将{ id: 0, type: '' }和接口数据合并
      temp = [...temp, ...res.data];
      // 赋值给articleType
      setArticleType(temp);
    });
  }, []);
  return (
    <div className={style.container}>
      <div className={style.middle}>
        <div className={style.nav}>
          <div className={style.avator_con}>
            <Avatar
              className={style.avator}
              src="https://gw.alipayobjects.com/zos/antfincdn/LlvErxo8H9/photo-1503185912284-5271ff81b9a8.webp"
            />
            <div className={style.author}>
              <Tag color="#108ee9">{userInfo.username}</Tag>
            </div>
          </div>

          {menu.map((item, index) => (
            <div className={style.navbar} key={index}>
              <Link to={item.link} style={{ color: '#707070' }}>
                <span style={{ marginRight: '26px' }}>{item.icon}</span>
                {item.title}
              </Link>
            </div>
          ))}
         
          
        </div>
        <div className={style.content}>
        <Tabs
            // 正常来说 key最好别用中文，我这里为了方便key都是中文。
            // defaultActiveKey 默认选中的key
            defaultActiveKey={'全部'}
            // 选择其他Tab
            onChange={key => {
              // 改变查询参数
              setSearchParams({ ...searchParams, type: key });
              // 调用查询文章接口
              searchAuthorOrTitle({ ...searchParams, type: key });
            }}
          >
            {/*  渲染Tabs */}
            {articleType.map((item, index) => (
              // 如果type的值是空 展示 '全部'
              <TabPane tab={item.type === '' ? '全部' : item.type} key={item.type} />
            ))}
          </Tabs>
          <div className={style.article_container} style={{height:'690px',overflow:'auto',paddingBottom:'20px'}}>
          {acticles.map((article, index) => (
            <div
              className={style.card}
              onClick={() => {
                goToDetail(article.id, article.user_id);
              }}
            >
              {/* 左上角三个点点的样式 */}
              <div className={style.icon}>
                <div className={style.circle} style={{ background: 'red' }} />
                <div className={style.circle} style={{ background: 'orange', marginLeft: '4px' }} />
                <div className={style.circle} style={{ background: 'green', marginLeft: '4px' }} />
                <div style={{ flex: 1, textAlign: 'right', paddingRight: '10px' }}>
                  <CalendarOutlined className={style.date_icon} />
                  <span className={style.date}>{article.updatedAt}</span>
                </div>
              </div>
              {/* 主要内容 */}
              <div className={style.container}>
                {/* 文章封面 */}
                <div className={style.img_continer}>
                  <img src={article.cover} className={style.img} />
                </div>
                <div className={style.cotent_container}>
                  <div className={style.info}>
                    <Title level={5}>{article.title}</Title>
                    <div style={{ flex: '1', textAlign: 'right', paddingRight: '10px' }}>
                      <GithubOutlined /> &nbsp;
                      <span className={style.author}>{article.username}</span>
                    </div>
                  </div>
                  <div className={style.text}>{article.desc}...</div>
                </div>
              </div>
            </div>
          ))}
          </div>
        
        </div>
        <div className={style.mine}>
          <Input
            placeholder="搜索🔍题目、作者"
            style={{ borderRadius: '20px', width: '100%' }}
            onChange={e => {
              setSearchParams({
                title: e.target.value,
                username: e.target.value,
              });
            }}
            suffix={(
              <Button
                type="primary"
                shape="circle"
                icon={<SearchOutlined />}
                onClick={() => {
                  searchAuthorOrTitle();
                }}
              />
            )}
          />
          {/* <div className={style.mine_top}> */}
          <Calender />
          {/* </div> */}
          <div className={style.mine_bottom}>
            <Weather />
          </div>
        </div>
      </div>
    </div>
  );
};
export default Index;
